<template>
  <PageWrapper title="" contentFullHeight fixedHeight>
    <div class="bg-white pt-2 pb-2 h-full overflow-auto">
      <div class="w-1000px m-auto mb-10px">
        <Spin :spinning="loading">
          <Card
            title="配置管理"
            :bodyStyle="{ padding: '0' }"
            :headStyle="{ fontWeight: 'bold', textAlign: 'center', padding: '0' }"
          >
            <Descriptions bordered :column="1" :labelStyle="{ width: '400px', textAlign: 'right' }">
              <DescriptionsItem label="是否启用企业微信">
                <div class="flex gap-2">
                  <Select v-model:value="dataRef.isUse" :options="yesOrno" style="width: 100%" />
                  <Button type="primary" @click="handleSubmit('isUse')">修改</Button>
                </div>
              </DescriptionsItem>
              <DescriptionsItem label="企业微信服务器">
                <div class="flex gap-2">
                  <Input v-model:value="dataRef.serverName" />
                  <Button type="primary" @click="handleSubmit('serverName')">修改</Button>
                </div>
              </DescriptionsItem>
              <DescriptionsItem label="同步方式">
                <div class="flex gap-2">
                  <Select
                    v-model:value="dataRef.isSyncWxToOA"
                    :options="syncType"
                    style="width: 100%"
                  />
                  <Button type="primary" @click="handleSubmit('isSyncWxToOA')">修改</Button>
                </div>
              </DescriptionsItem>
              <DescriptionsItem label="企业微信corpId">
                <div class="flex gap-2">
                  <Input v-model:value="dataRef.corpId" />
                  <Button type="primary" @click="handleSubmit('corpId')">修改</Button>
                </div>
              </DescriptionsItem>
              <DescriptionsItem label="接收消息服务器配置，微信回调接口token">
                <div class="flex gap-2">
                  <Input v-model:value="dataRef.token" />
                  <Button type="primary" @click="handleSubmit('token')">修改</Button>
                </div>
              </DescriptionsItem>
              <DescriptionsItem label="接收消息服务器配置，加密后43位字符串">
                <div class="flex gap-2">
                  <Input v-model:value="dataRef.encodingAESKey" />
                  <Button type="primary" @click="handleSubmit('encodingAESKey')">修改</Button>
                </div>
              </DescriptionsItem>
              <DescriptionsItem label="企业微信中通讯录的secret">
                <div class="flex gap-2">
                  <Input v-model:value="dataRef.secretContacts" />
                  <Button type="primary" @click="handleSubmit('secretContacts')">修改</Button>
                </div>
              </DescriptionsItem>
              <DescriptionsItem label=" 微信帐户与系统用户关联字段">
                <div class="flex gap-2">
                  <Select
                    v-model:value="dataRef.isUserIdUseMobile"
                    :options="sysType"
                    style="width: 100%"
                  />
                  <Button type="primary" @click="handleSubmit('isUserIdUseMobile')">修改</Button>
                </div>
              </DescriptionsItem>
              <DescriptionsItem label=" 微信小程序登录方式">
                <div class="flex gap-2">
                  <Select
                    v-model:value="dataRef.wxMiniLoginMode"
                    :options="loginType"
                    style="width: 100%"
                  />
                  <Button type="primary" @click="handleSubmit('wxMiniLoginMode')">修改</Button>
                </div>
              </DescriptionsItem>
            </Descriptions>
          </Card>
          <Card
            style="margin-top: 10px"
            title="应用管理"
            :bodyStyle="{ padding: '0' }"
            :headStyle="{ fontWeight: 'bold', textAlign: 'center', padding: '0' }"
            class="agent"
          >
            <Descriptions bordered :column="1" :labelStyle="{ width: '400px', textAlign: 'right' }">
              <DescriptionsItem label="应用ID">
                <Input v-model:value="agentModel.agentId" />
              </DescriptionsItem>
              <DescriptionsItem label="应用名称">
                <Input v-model:value="agentModel.agentName" />
              </DescriptionsItem>
              <DescriptionsItem label="应用secret">
                <Input v-model:value="agentModel.secret" />
              </DescriptionsItem>
              <DescriptionsItem label="应用主页">
                <Input v-model:value="agentModel.homeUrl" />
              </DescriptionsItem>
              <DescriptionsItem label="应用LOGO" style="border-bottom: 1px solid #f0f0f0">
                <div class="flex items-center gap-2">
                  <!-- image/* -->
                  <Upload
                    :fileList="fileList"
                    accept=".png,.jpg"
                    :multiple="false"
                    :beforeUpload="handleBeforeUpload"
                    :remove="handleRemove"
                  >
                    <Button>
                      <upload-outlined />
                      上传文件
                    </Button>
                  </Upload>
                  <div>{{ agentModel.text }}</div>
                </div>
              </DescriptionsItem>
            </Descriptions>
            <div class="mt-2 mb-2 text-center">
              <a-button @click="handleSubmitAgent" type="primary">确定</a-button>
            </div>
          </Card>
        </Spin>
      </div>
    </div>
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import {
    Descriptions,
    Input,
    Select,
    Button,
    Card,
    Upload,
    UploadProps,
    Spin,
  } from 'ant-design-vue';
  import { UploadOutlined } from '@ant-design/icons-vue';
  const DescriptionsItem = Descriptions.Item;
  import {
    getWxConfigWeixinPage,
    getWxConfigWeixin,
    getWxAdminConfigAgent,
  } from '/@/api/system/system';
  import { useMessage } from '/@/hooks/web/useMessage';
  const { createMessage } = useMessage();
  import { yesOrno, loginType, sysType, syncType } from './wxconfig.data';
  import { PageWrapper } from '/@/components/Page';
  const dataRef = ref<Recordable>({});
  const agentModel = ref({
    agentId: '',
    agentName: '',
    secret: '',
    homeUrl: '',
    media: '',
    text: '',
    oldAgentId: '',
  });
  const fetch = async () => {
    const res = await getWxConfigWeixinPage();
    res?.config?.forEach((item) => {
      dataRef.value[item.name] = item.value;
    });
    if (res?.agent && res?.agent?.length) {
      agentModel.value = res.agent[0];
      agentModel.value.oldAgentId = agentModel.value.agentId;
    }
    console.log('dataRef.value', dataRef.value);
  };
  onMounted(fetch);
  const loading = ref(false);
  const handleSubmit = async (key) => {
    try {
      const formData = {
        name: key,
        value: dataRef.value[key],
      };
      loading.value = true;
      await getWxConfigWeixin(formData);
      createMessage.success('操作成功');
      fetch();
      loading.value = false;
    } catch (error) {
      loading.value = false;
    }
  };
  const fileList = ref<any>([]);
  const handleBeforeUpload: UploadProps['beforeUpload'] = (file: File) => {
    fileList.value = [file];
    return false;
  };
  const handleRemove = (file) => {
    fileList.value = [];
    // const index = fileList.value.indexOf(file);
    // const newFileList = fileList.value.slice();
    // newFileList.splice(index, 1);
    // fileList.value = newFileList;
  };
  const handleSubmitAgent = async () => {
    console.log('agentModel', agentModel.value);
    console.log('fileList', fileList.value);
    if (fileList.value.length == 0) {
      createMessage.warning('应用LOGO不能为空');
      return;
    }
    try {
      const formData = {
        ...agentModel.value,
        media: fileList.value[0],
      };
      let form = new FormData();
      for (let v in formData) {
        // 将null转为''
        form.append(v, formData[v] != null ? formData[v] : '');
      }
      loading.value = true;
      await getWxAdminConfigAgent(form);
      createMessage.success('操作成功');
      fetch();
      loading.value = false;
    } catch (error) {
      loading.value = false;
    }
  };
</script>
<style lang="less" scoped>
  :deep(.ant-card-head-title) {
    padding: 10px 0;
  }

  :deep(.ant-card-head) {
    min-height: 30px;
  }

  :deep(.ant-descriptions-bordered .ant-descriptions-view) {
    border: none;
  }
  .agent :deep(.ant-descriptions-bordered .ant-descriptions-view) {
    border-bottom: 1px solid #f0f0f0;
  }
</style>
